import React from 'react';
import styled from 'styled-components';

import { Contract } from 'ethers';

import Button from '../../../components/Button';
import Card from '../../../components/Card';
import CardContent from '../../../components/CardContent';
import CardIcon from '../../../components/CardIcon';
import Label from '../../../components/Label';
import Value from '../../../components/Value';

import useEarnings from '../../../hooks/useEarnings';
import useHarvest from '../../../hooks/useHarvest';

import { getDisplayBalance } from '../../../utils/formatBalance';
import TokenSymbol from '../../../components/TokenSymbol';
import { Bank } from '../../../basis-cash';
import BigNumber from 'ethers';
import useLiquidityOracle from '../../../hooks/useLiquidityOracle';
import config from '../../../config';

interface HarvestProps {
  bank: Bank;
  otherTokenName?: string;
}

const Harvest: React.FC<HarvestProps> = ({ bank, otherTokenName }) => {
  const earnings = useEarnings(bank.contract, otherTokenName);
  let ratio = 1;
  if (bank.earnTokenName == 'SHARE') {
    ratio = 0.95;
  }
  const { onReward } = useHarvest(bank);

  const oracle = useLiquidityOracle();
  let burnings = null;
  if (config.plane[config.group].lp) {
    burnings = Number(getDisplayBalance(earnings, otherTokenName ? 18 : bank.earnToken.decimal)) * Math.max(0, config.plane[config.group].lp - Number(oracle)) / config.plane[config.group].lp;
  }
  //burnings = 1;


  let tokenName = bank.earnTokenName;
  if (otherTokenName) {
    tokenName = otherTokenName;
  }
  return (
    <Card>
      <CardContent>
        <StyledCardContentInner>
          <StyledCardHeader>
            <CardIcon>
              {
                !!otherTokenName ? 
                (<TokenSymbol symbol={otherTokenName} />)
                :
                (<TokenSymbol symbol={bank.earnToken.symbol} />)
              }
            </CardIcon>
            <Value value={(Number(getDisplayBalance(earnings, otherTokenName ? 18 : bank.earnToken.decimal)) * ratio).toFixed(4)} />
            <Label text={`${tokenName} 赚取`} />
            {/*
              bank.earnTokenName == 'SHARE' && burnings ? 
              <>
              <Value value={(Number(burnings)).toFixed(4)} disabled={true} />
              <Label text="Burn after Settle" color="#999999"/>
              </>
              :
              <></>
            */}
          </StyledCardHeader>
          <StyledCardActions>
            {
              !!otherTokenName ? 
              <></>
              :
              <Button onClick={onReward} disabled={Number(getDisplayBalance(earnings, otherTokenName ? 18 : bank.earnToken.decimal)) <= 0} text="提取"  />
            }
            
          </StyledCardActions>
        </StyledCardContentInner>
      </CardContent>
    </Card>
  );
};

const StyledCardHeader = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`;
const StyledCardActions = styled.div`
  display: flex;
  justify-content: center;
  margin-top: ${(props) => props.theme.spacing[6]}px;
  width: 100%;
`;

const StyledSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledCardContentInner = styled.div`
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
`;

export default Harvest;
